<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        /* background-color: #d3dce6; */
    }

    .el-carousel__item:nth-child(2n+1) {
        /* background-color: #d3dce6; */
    }

    .closeBtn {
        font-size: 36px;
        position: absolute;
        right: 24px;
        top: 150px;
        cursor: pointer;
        color: #fff;
    }

</style>
<template>
    <div class="el-dialog__wrapper" style="background: rgba(0, 0, 0, 0.5);z-index: 2000;">
        <i class="el-icon-circle-close-outline closeBtn" @click="closeView"></i>
        <el-carousel :initial-index="startindex" :interval="interval" :height="clientheight" :autoplay='autoplay' style="top:30%;text-align: center;">
            <el-carousel-item v-for="item in imgViewArr" :key="item.$index"  >
                <h3>
                    <img :src="item" :style="'height:'+height">
                </h3>

            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                interval: 4000,
                autoplay: false,
                height: '500px',
                clientheight: '500px'
            }
        },
        props: {
            imgViewArr:{
                type:Array,
                default:[]
            },
            startindex:{
                type:Number,
                default:0
            }
        },
        methods: {
            closeView() {
                this.$emit('closeView');
            }
        },
        // 进入页面加载数据
        activated() {
            this.handleInitLoad();
        },
        //离开页面销毁定时器
        deactivated(){

        },
    }

</script>
